<template>
  <var-form @submit="handleSubmit">
    <var-space direction="column" :size="[14, 0]">
      <var-input
        autofocus
        placeholder="账号/手机号"
        :rules="[v => !!v || '账号/手机号不能为空']"
        v-model="formData.phone"
      />
      <var-input
        type="password"
        placeholder="密码"
        :rules="[v => !!v || '密码不能为空']"
        v-model="formData.password"
      />
    </var-space>
    <div class="link">
      <var-link to="/code" type="primary" underline="none">验证码登录</var-link>
      <var-link to="/register" type="primary" underline="none"
        >立即注册</var-link
      >
    </div>
    <var-button style="width: 100%" type="primary" native-type="submit"
      >登录</var-button
    >
  </var-form>
</template>

<script setup lang="ts">
import { Md5 } from 'ts-md5'
import { passwordLogin } from '@/api'

const router = useRouter()
const route = useRoute()

const formData = ref({
  phone: '13511111111',
  password: '123456'
})

const handleSubmit = async valid => {
  if (!valid) return
  const res = await passwordLogin({
    phone: formData.value.phone,
    password: Md5.hashStr(formData.value.password)
  })
  res && localStorage.setItem('token', res)
  Snackbar['success']('登录成功')

  router.push(route.query.returnUrl ? route.query.returnUrl : '/home')
}
</script>

<style scoped lang="scss"></style>
